<!-- Widget --> <div class="widget widget-messages widget-heading-simple widget-body-white"> <div class="widget-body padding-none"> <div class="row row-merge borders"> <div class="col-md-3 listWrapper"> <div class="innerAll"> <form autocomplete="off" class="form-inline margin-none"> <div class="input-group input-group-sm"> <input type="text" class="form-control" placeholder="Find someone .." /> <span class="input-group-btn"> <button type="button" class="btn btn-primary btn-xs pull-right"><i class="fa fa-search"></i></button> </span> </div> </form> </div> <span class="results">1490 messages <i class="fa fa-circle-arrow-down"></i></span> <ul class="list unstyled"> <li class="active"> <div class="media innerAll"> <div class="media-object pull-left thumb hidden-phone"><img data-src="holder.js/50x50/dark" alt="Image" /></div> <div class="media-body"> <span class="strong">adrian</span> <small>Latest comment line...</small><br/> <small class="text-italic text-primary-light"><i class="fa fa-calendar fa fa-fixed-width"></i> 17 days ago</small> </div> </div> </li> <li> <div class="media innerAll"> <div class="media-object pull-left thumb hidden-phone"><img data-src="holder.js/50x50/dark" alt="Image" /></div> <div class="media-body"> <span class="strong">bogdan</span> <small>Latest comment line...</small><br/> <small class="text-italic text-primary-light"><i class="fa fa-calendar fa fa-fixed-width"></i> 17 days ago</small> </div> </div> </li> <li> <div class="media innerAll"> <div class="media-object pull-left thumb hidden-phone"><img data-src="holder.js/50x50/dark" alt="Image" /></div> <div class="media-body"> <span class="strong">susanne</span> <small>Latest comment line...</small><br/> <small class="text-italic text-primary-light"><i class="fa fa-calendar fa fa-fixed-width"></i> 17 days ago</small> </div> </div> </li> </ul> </div> <div class="col-md-9 detailsWrapper"> <div class="ajax-loading hide"> <i class="fa fa-refresh text-primary-light fa fa-spin fa fa-4x"></i> </div> <div class="innerAll"> <div class="row"> <div class="col-md-9"> <h4 class="margin-none"> <a href="" class="btn btn-info"><i class="fa fa-user fa fa-fixed-width"></i> Bogdan</a> </h4> </div> <div class="col-md-3 text-right"> <a href="" class="text-size-regular text-primary-light vertical-middle"><i class="fa fa-flag fa fa-fixed-width"></i> Report</a> </div> </div> </div> <a href="" class="load border-top ">Load earlier messages <i class="fa fa-refresh innerL third"></i></a> <div class="row row-merge borders border-top"> <div class="col-md-12"> <div class="innerAll"> <div class="media"> <a href="" class="thumb pull-left visible-md visible-lg"><img data-src="holder.js/50x50/white" alt="Image" class="media-object" /></a> <div class="media-body"> <small class="pull-right text-primary-light"><i class="fa fa-calendar fa fa-fixed-width"></i> July 8, 2013 <em>12:38 pm</em></small> <strong class="text-primary">adrian</strong><br/> <small>Hello bogdan. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, reiciendis soluta libero eligendi fuga quam nam tempora illum iste atque hic eveniet vel accusantium ad quisquam a sequi impedit cumque! Autem, ipsam esse officia amet.</small> </div> </div> </div> </div> </div> <div class="row row-merge borders border-bottom"> <div class="col-md-12"> <div class="innerAll"> <div class="media"> <a href="" class="thumb pull-left visible-md visible-lg"><img data-src="holder.js/50x50/white" alt="Image" class="media-object" /></a> <div class="media-body"> <small class="pull-right text-primary-light"><i class="fa fa-calendar fa fa-fixed-width"></i> July 8, 2013 <em>12:38 pm</em></small> <strong class="text-primary">bogdan</strong><br/> <small>Hello adrian. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, reiciendis soluta libero eligendi fuga quam nam tempora illum iste atque hic eveniet vel accusantium ad quisquam a sequi impedit cumque! Autem, ipsam esse officia amet.</small> </div> </div> </div> </div> </div> <span href="" class="load"><i class="fa fa-calendar innerR third"></i>Today</span> <div class="row row-merge borders border-top"> <div class="col-md-12"> <div class="innerAll"> <div class="media"> <a href="" class="thumb pull-left visible-md visible-lg"><img data-src="holder.js/50x50/white" alt="Image" class="media-object" /></a> <div class="media-body"> <small class="pull-right text-primary-light"><i class="fa fa-calendar fa fa-fixed-width"></i> <em>12:38 pm</em></small> <strong class="text-primary">adrian</strong><br/> <small>Hello bogdan. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, quos soluta cupiditate dolor nobis id!</small> </div> </div> </div> </div> </div> <div class="row row-merge borders border-bottom"> <div class="col-md-12"> <div class="innerAll"> <div class="media"> <a href="" class="thumb pull-left visible-md visible-lg"><img data-src="holder.js/50x50/white" alt="Image" class="media-object" /></a> <div class="media-body"> <small class="pull-right text-primary-light"><i class="fa fa-calendar fa fa-fixed-width"></i> <em>12:38 pm</em></small> <strong class="text-primary">bogdan</strong><br/> <small>Hello adrian. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, quas alias voluptatum odit nemo consequuntur blanditiis praesentium pariatur vitae dolore earum saepe dolorum maiores vero fuga sequi quibusdam labore optio doloribus consectetur laudantium in id quae nostrum dignissimos quidem voluptatibus!</small> </div> </div> </div> </div> </div> <div class="innerAll"> <form role="form"> <div class="form-group"> <textarea placeholder="Type in your message .. " class="form-control" rows="5"></textarea> </div> <div class="form-group"> <div class="text-right"> <button type="button" class="btn btn-primary">Send <i class="fa-fw fa fa-envelope"></i></button> </div> </div> </form> </div> </div> </div> </div> </div> <!-- // Widget END -->
@import "assets/components/modules/admin/messages/assets/less/messages.less"; @import "assets/components/core/less/widgets.less"; @import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
<head>
section of your HTML document, before any JavaScript files: <link type="stylesheet/less" href="styles.less" />
NOTE All the styles from the CORE package also need to be imported in this file, before the component imports.
BODY You should include the following scripts at the end of the HTML document, right before the closing </body>
tag.
<script src="assets/components/modules/admin/messages/assets/js/messages.js?v=v1.2.3"></script> <script src="assets/components/plugins/holder/holder.js?v=v1.2.3"></script>